<template>
<div class="money">
  <swiper class="prizeShow" v-if="helpData" :options="swiperOption">
    <swiper-slide v-for="item in helpData.success"><p>{{item}}</p></swiper-slide>
  </swiper>
  <div class="moneyBox">
    <div class="titleText" v-if="$route.query.code">您获800助学金快邀好友助力！</div>
    <div class="titleText" v-else>还能邀{{ helpData?helpData.help.help_max_num:'0' }}位伙伴前来助学</div>
    <div class="moneyBar">
      <div class="num">￥<em>{{ helpData?helpData.help.money:'100' }}</em></div>
      <div class="bar" v-if="helpData">
        <em :style="{'width':helpData.help.money/helpData.help.max_money*100+'%'}"></em>
      </div>
      <div class="max">{{ helpData?helpData.help.info:'' }}</div>
    </div>
    <dl class="btnList" v-if="$route.query.code">
      <dd>
        <button class="btnStyle btn1 out">已帮好友助力{{helpMoney}}</button>
      </dd>
    </dl>
    <dl class="btnList" v-else>
      <dd>
        <button class="btnStyle btn2" @click="openRulePopFn">立即兑换</button>
      </dd>
      <dd>
        <button class="btnStyle btn1" @click="openSharePopFn">邀请好友助力</button>
      </dd>
    </dl>
    <div class="cutOf">
      截止时间：<count-down :data_date="helpData?helpData.help.mod_time:10000"></count-down>
    </div>
  </div>
</div>
</template>

<script>
export default{
  data(){
    return{
      swiperOption:{
        autoplay: {
          disableOnInteraction: false,
        },
        loop:true
      },
    }
  },
  props:['helpData','helpMoney'],
  mounted(){
  },
  methods:{
    openSharePopFn(){
      this.$emit('openSharePop');
    },
    openRulePopFn(){
      this.$emit('openRulePop');
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.money{
  .prizeShow{
    .swiper-wrapper{
      display:-webkit-box;
      justify-content:center;
      .swiper-slide{
        display:flex;
        p{
          background:rgba(#000,0.2);
          border-radius:99em;
          line-height:48px;
          display:flex;
          align-items:center;
          font-size:20px;
          padding:0 20px 0 20px;
          margin:0 auto;
          color:#FFF;
        }
        img{
          width:36px;
          height:36px;
          border-radius:50%;
          margin-right:12px;
          border:1px solid #FFF;
        }
      }
    }
  }
  .moneyBox{
    margin:30px auto;
    width:660px;
    box-sizing: border-box;
    background-color:#FFF;
    box-shadow:0 0 20px 10px rgba(#FFE1A6,0.7) inset;
    border-radius:40px;
    padding:40px 0;
    position:relative;
    &:before,&:after{
      content:'';
      width:92px;
      height:221px;
      position:absolute;
      bottom:100px;
      background:url($imgUrl+'moneyBg.png');
      background-size:100% 100%;
    }
    &:before{
      left:-45px;
    }
    &:after{
      right:-45px;
      transform: rotateY(180deg);
    }
    .titleText{
      background:url($imgUrl+'moneyTitle.png') no-repeat center top;
      background-size:431px auto;
      padding-top:55px;
      font-size:20px;
      font-weight: bold;
      color:#4E4E4E;
    }
    .moneyBar{
      margin-top:50px;
      .num{
        color:$c02;
        font-size:50px;
        line-height:1;
        display:flex;
        align-items: flex-end;
        justify-content: center;
        em{
          line-height:0.75;
          font-size:170%;
        }
      }
      .max{
        margin-top:20px;
        font-size:22px;
        color:#999;
      }
      .bar{
        margin:20px auto 0;
        width:400px;
        height:10px;
        background:#F0F0F0;
        border-radius:99em;
        em{
          display:block;
          height:100%;
          background:$c02;
          border-radius:99em;
        }
      }
    }
    .btnList{
      display:flex;
      justify-content: center;
      margin-top:30px;
      dd{
        &:last-child{
          margin-left:20px;
        }
        .btnStyle.out{
          margin-right:20px;
          width:500px;
        }
      }
    }
    .cutOf{
      margin-top:30px;
      color:#999;
      display:flex;
      justify-content: center;
      align-items: center;
      font-size:30px;
      /deep/ span{
        display:flex;
        align-items: center;
        color:#666;
        em{
          background-color:#666;
          color:#FFF;
          width:50px;
          line-height:50px;
          overflow:hidden;
          height:46px;
          border-radius:6px;
          margin:0 10px;
        }
      }
    }
  }
}
</style>
